<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>table-demo</title>
  </head>
  <body>
    <!-- <table class="table">
      <caption>
        Optional table caption.
      </caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody> -->

    <table
      border="1px"
      cellspacing="0"
      width="500px"
      height="300px"
      align="center"
    >
      <caption>
        <!-- 表格的标题 :应该写在table里面-->
        <h1>颜值排行</h1>
      </caption>
      <!-- border:表格的边框 -->
      <!-- cellspacing:边框之间的空白间隙,默认是2px -->
      <!-- cellpadding:内容到单元格边框的距离,一般不用 -->
      <!-- align:表格的水平对齐方式:left,right,center -->
      <thead>
        <tr>
          <!-- 表头数据 -->
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td align="center">吴彦祖</td>
          <td align="center">男</td>
          <td align="center" rowspan="2">45</td>
        </tr>
        <tr align="center">
          <td>霍建华</td>
          <td>男</td>
          <!-- <td>38</td> -->
          <!-- 后面不要的数据要删除 -->
        </tr>
        <tr align="center">
          <td>胡歌</td>
          <td colspan="2">男</td>
          <!-- <td>35</td> -->
          <!-- 后面不要的数据要删除 -->
        </tr>
      </tbody>
    </table>
  </body>
</html>
